<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>注册页面</title>
    <meta charset="utf-8">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<!--  <link rel="stylesheet" href="http://dreamsky.github.io/main/blog/common/init.css">-->
	<style type="text/css">
	
		a {
			color:#0078ff;
		}
	</style>
	<link href="<%=request.getContextPath() %>/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link href="<%=request.getContextPath() %>/resources/css/register.css" rel="stylesheet">
		<link href="<%=request.getContextPath() %>/resources/img/tea.png" rel="icon">
	
	<script src="<%=request.getContextPath() %>/resources/jquery/jquery-1.11.3.min.js"></script>
    <script src="<%=request.getContextPath() %>/resources/bootstrap/js/bootstrap.min.js"></script>
 	<script src="<%=request.getContextPath() %>/resources/js/register.js"></script>
 	<script src="<%=request.getContextPath() %>/resources/layer/layer.js"></script>		
 	
 	
  </head>
  
  <body>

   <section style="opacity: 0.9;">
		
        <!-- <h1 style="text-align:center;">用户注册</h1> -->
       <fieldset>
            <legend hidden>用户注册</legend>
            
		         <div>
					<div class="avatar_border" style="position: relative;border: 1px solid #3EA85E;width: 120px;height:120px;margin: 15px 0px 0px 200px;border-radius: 50%;">
						<img src="<%=request.getContextPath() %>/resources/img/default.png" alt="选择并上传头像" id="avatar_img"
							 style="width: 120px;height: 120px;left:0;top: 0;border-radius: 50%;"/>
						<input type="file" id="avatar_file" name="avatar_file"
							   accept="image/jpg,image/png,image/gif"
							   style="width: 100%;height:100%;opacity: 0;position: absolute;left:0;top: 0;margin-top:0px;cursor: pointer;"/>
					</div>
					<br/>
				</div>
				<form class="bs-example bs-example-form" role="form">
                <table>
                    <tbody>		                    	
                    	 
                        <tr>
                            <td><label for="userName">用户名：</label></td>
                            <td>
                                <input type="text" class="form-control" placeholder="USERNAME"  name="userName"  id="userName" >
                            </td>
                            <td>
                                <nav class="error_block">
                                    <div class="userName_error_img"></div>
                                    <div class="userName_error_msg">
                                    </div>
                                </nav>
                            </td>
                        </tr>
                       
                        <tr>
                            <td><label for="nickName">昵称：</label></td>
                            <td><input type="text"  class="form-control" placeholder="NICKNAME" name="nickName" id="nickName"></td>
                            <td>
                                <nav class="error_block">
                                    <div class="nickName_error_img"></div>
                                    <div class="nickName_error_msg">
                                    </div>
                                </nav>
                            </td>
                        </tr>
                        <tr>
                            <td><label for="userName">密码：</label></td>
                            <td><input type="password"  class="form-control" placeholder="PASSWORD" name="password" id="password"></td>
                            <td>
                                <nav class="error_block">
                                    <div class="password_error_img"></div>
                                    <div class="password_error_msg"></div>
                                </nav>
                            </td>
                        </tr>
                        <tr>
                            <td><label for="rePassword">再输入一次：</label></td>
                            <td><input type="password"  class="form-control" placeholder="REPASSWORD" name="rePassword" id="rePassword"></td>
                            <td>
                                <nav class="error_block">
                                    <div class="rePassword_error_img"></div>
                                    <div class="rePassword_error_msg"></div>
                                </nav>
                            </td>
                        </tr>
                        <tr>
                            <td><label for="userName">email：</label></td>
                            <td><input type="email"  class="form-control" placeholder="EMAIL" name="email" id="email"></td>
                            <td>
                                <nav class="error_block">
                                    <div class="email_error_img"></div>
                                    <div class="email_error_msg"></div>
                                </nav>
                            </td>
                        </tr>
                        <tr>
                            <td><label for="phone">手机号：</label></td>
                            <td>
                                <input type="text"  class="form-control" placeholder="PHONENUMBER" name="phone" id="phone">
                            </td>
                            <td>
                                <nav class="error_block">
                                    <div class="phone_error_img"></div>
                                    <div class="phone_error_msg"></div>
                                </nav>
                            </td>
                        </tr>
                        <tr>
                            <td>性别：</td>
                            <td colspan="2">
                                <input type="radio" name="sex" value="男" id="man">
                                <label for="man">男</label>&nbsp;
                                <input type="radio" name="sex" value="女" id="woman">
                                <label for="woman">女</label>
                            </td>
                        </tr>
                        
                        
                    </tbody>
                </table>
                <div class="row">
                     
                      <button type="button" class="btn btn-info" id="register">注册</button>&nbsp;&nbsp;&nbsp;&nbsp;
                       <button type="reset" class="btn btn-warning">重置</button>
                </div>
            </form>
        </fieldset>
    </section>
    
    
    
    
   <%--  <script type="text/javascript" src="<%=request.getContextPath() %>/resources/assets/three.min.js"></script>
		<script type="text/javascript" src="<%=request.getContextPath() %>/resources/assets/Detector.js"></script>
		<script id="vs" type="x-shader/x-vertex">

			varying vec2 vUv;

			void main() {

				vUv = uv;
				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

			}

		</script>

		<script id="fs" type="x-shader/x-fragment">

			uniform sampler2D map;

			uniform vec3 fogColor;
			uniform float fogNear;
			uniform float fogFar;

			varying vec2 vUv;

			void main() {

				float depth = gl_FragCoord.z / gl_FragCoord.w;
				float fogFactor = smoothstep( fogNear, fogFar, depth );

				gl_FragColor = texture2D( map, vUv );
				gl_FragColor.w *= pow( gl_FragCoord.z, 20.0 );
				gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );

			}

		</script>

		<script type="text/javascript">

			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

			var container;
			var camera, scene, renderer;
			var mesh, geometry, material;

			var mouseX = 0, mouseY = 0;
			var start_time = Date.now();

			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;

			init();

			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				// Bg gradient

				var canvas = document.createElement( 'canvas' );
				canvas.width = 32;
				canvas.height = window.innerHeight;

				var context = canvas.getContext( '2d' );

				var gradient = context.createLinearGradient( 0, 0, 0, canvas.height );
				gradient.addColorStop(0, "#1e4877");
				gradient.addColorStop(0.5, "#4584b4");

				context.fillStyle = gradient;
				context.fillRect(0, 0, canvas.width, canvas.height);

				container.style.background = 'url(' + canvas.toDataURL('image/png') + ')';
				container.style.backgroundSize = '32px 100%';

				//

				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 3000 );
				camera.position.z = 6000;

				scene = new THREE.Scene();

				geometry = new THREE.Geometry();

				var texture = THREE.ImageUtils.loadTexture( '/resources/img/cloud10.png', null, animate );
				texture.magFilter = THREE.LinearMipMapLinearFilter;
				texture.minFilter = THREE.LinearMipMapLinearFilter;

				var fog = new THREE.Fog( 0x4584b4, - 100, 3000 );

				material = new THREE.ShaderMaterial( {

					uniforms: {

						"map": { type: "t", value: texture },
						"fogColor" : { type: "c", value: fog.color },
						"fogNear" : { type: "f", value: fog.near },
						"fogFar" : { type: "f", value: fog.far },

					},
					vertexShader: document.getElementById( 'vs' ).textContent,
					fragmentShader: document.getElementById( 'fs' ).textContent,
					depthWrite: false,
					depthTest: false,
					transparent: true

				} );

				var plane = new THREE.Mesh( new THREE.PlaneGeometry( 64, 64 ) );

				for ( var i = 0; i < 8000; i++ ) {

					plane.position.x = Math.random() * 1000 - 500;
					plane.position.y = - Math.random() * Math.random() * 200 - 15;
					plane.position.z = i;
					plane.rotation.z = Math.random() * Math.PI;
					plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;

					THREE.GeometryUtils.merge( geometry, plane );

				}

				mesh = new THREE.Mesh( geometry, material );
				scene.add( mesh );

				mesh = new THREE.Mesh( geometry, material );
				mesh.position.z = - 8000;
				scene.add( mesh );

				renderer = new THREE.WebGLRenderer( { antialias: false } );
				renderer.setSize( window.innerWidth, window.innerHeight );
				container.appendChild( renderer.domElement );

				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onDocumentMouseMove( event ) {

				mouseX = ( event.clientX - windowHalfX ) * 0.25;
				mouseY = ( event.clientY - windowHalfY ) * 0.15;

			}

			function onWindowResize( event ) {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			function animate() {

				requestAnimationFrame( animate );

				position = ( ( Date.now() - start_time ) * 0.03 ) % 8000;

				camera.position.x += ( mouseX - camera.position.x ) * 0.01;
				camera.position.y += ( - mouseY - camera.position.y ) * 0.01;
				camera.position.z = - position + 8000;

				renderer.render( scene, camera );

			}

		</script>
	<script src="http://dreamsky.github.io/main/blog/common/jquery.min.js"></script>
	<script src="http://dreamsky.github.io/main/blog/common/init.js"></script> --%>
  </body>
</html>
